<template>
  <Layout>

    <Form ref="form1" :model="form1" :label-width="120">
      <Row :gutter="16" class="query-form2" v-show="!switchFlag">
        <Col span="8">
          <FormItem label="活动方案名称：" prop="programmeName">
            <Input class="query-form-el" type="text" v-model="form1.programmeName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="活动主题名称：" prop="activityName">
            <Input class="query-form-el" type="text" v-model="form1.themeName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text">
              展开
              <Icon type="ios-arrow-down"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row :gutter="16" v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="活动方案名称：" prop="activityName">
            <Input class="query-form-el" type="text" v-model="form1.programmeName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="活动主题名称：" prop="activityName">
            <Input class="query-form-el" type="text" v-model="form1.themeName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="主办单位：" prop="themeAddress">
            <Input class="query-form-el" type="text" v-model="form1.themeAddress"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="活动时间：">
            <Date-picker type="daterange" style="width: 95%" v-model="activityDate"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="编制人员：" prop="staffName">
            <Input class="query-form-el" type="text" v-model="form1.staffName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="负责人：" prop="possess">
            <Input class="query-form-el" type="text" v-model="form1.possess"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" v-show="switchFlag" class="query-form2">
        <Col span="24">
          <div style="float: right;height:44px">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2"
                    type="text">收起
              <Icon type="ios-arrow-up"/>
            </Button>
          </div>
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!"
           border :columns="columns1" :data="dataTable">
    </Table>

    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>
  </layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import {sessionStorage} from '../../../../common/cacheUtils.js';

export default {
  data() {
    return {
      form1: {},
      switchFlag: false,
      //分页参数
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          width: 150,
          title: '活动方案名称',
          align: 'center',
          key: 'programmeName',
        },
        {
          width: 150,
          title: '主题名称',
          align: 'center',
          key: 'themeName',
        },
        {
          width: 150,
          title: '负责人',
          align: 'center',
          key: 'possess',
        },
        {
          width: 150,
          title: '联系方式',
          align: 'center',
          key: 'phone',
        },
        {
          width: 300,
          title: '主办单位',
          align: 'center',
          key: 'themeAddress',
        },

        {
          width: 150,
          title: '开始时间',
          align: 'center',
          key: 'startDate',
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.startDate), 'yyyy-MM-dd'))
            ]);
          }
        },
        {
          width: 150,
          title: '结束时间',
          align: 'center',
          key: 'endDate',
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.endDate), 'yyyy-MM-dd'))
            ]);
          }
        },
        {
          width: 150,
          title: '编制日期',
          align: 'center',
          key: 'preparationDate',
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.preparationDate), 'yyyy-MM-dd'))
            ]);
          }
        },

        {
          width: 150,
          title: '编制人员',
          align: 'center',
          key: 'staffName',
        },
        {
          width: 150,
          title: '审核人员',
          align: 'center',
          key: 'auditorName',
        },
        {
          width: 150,
          title: '批准人员',
          align: 'center',
          key: 'approvedByName',
        },
        {
          width: 150,
          title: '上报单位',
          align: 'center',
          key: 'orgName',
        },
        {
          width: 150,
          title: '上报日期',
          align: 'center',
          key: 'reportingDate',
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.reportingDate), 'yyyy-MM-dd'))
            ]);
          }
        },

        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                },
                on: {
                  click: () => {
                    this.save(params.row);
                  }
                }
              }, '选择'),
            ]);
          }
        }
      ],
      tableHeight: 450,
      dataTable: [],
    }
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 150;
    this.query();
  },
  methods: {
    switchQuery(flag) {
      this.switchFlag = flag;
      if (this.switchFlag) {
        this.tableHeight = this.tableHeight - 88;
      } else {
        this.tableHeight = this.tableHeight + 88;
      }
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    copyArray(arr) {
      return JSON.parse(JSON.stringify(arr));
    },


    save(row) {
      this.$emit('getActivityData', row);
    },

    query() {
      let orgId = sessionStorage('userId').getObject('userId').companyId

      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        orgId: orgId,
        activityType: this.$route.query.type
      }

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

      let url = Api.queryProgramme;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1 = {}
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
  },
}
</script>
